import { Upload, Button, message } from 'antd'
import { useRef, useState } from 'react'
import {
  PlusOutlined,
  CloudDownloadOutlined,
} from '@ant-design/icons'
import './index.less'
import TypeTree from '@/pages/components/type-tree/index.jsx'
import TestCaseList from './components/test-case-list.jsx'
import { ContainerLayout, CommonTitle } from '@/components'
import { Space } from 'antd'

export const TestCase = () => {
  const typeTreeRef = useRef()
  const listRef = useRef()

  const [currentType, setCurrentType] = useState({})

  const onSelect = (type) => {
    setCurrentType(type)
  }
  const props = {
    name: 'file',
    action: '/api/step/importInstance',
    accept: '.txt',
    maxCount: 1,
    showUploadList: false,
    onChange(info) {
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`)
        listRef.current.refreshList()
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`)
      }
    },
  }

  const extra = (
    <Button
      className="icon-btn"
      type="text"
      size="small"
      title="新增"
      icon={<PlusOutlined />}
      onClick={() => {
        typeTreeRef.current.addTopLevel()
      }}
    ></Button>
  )

  const stepExtra = (
    <Space>
      <Button
        className="icon-btn"
        type="text"
        size="small"
        title="新增"
        icon={<PlusOutlined />}
        onClick={() => {
          listRef.current.addFlowStep()
        }}
      ></Button>
      <Upload {...props}>
        <Button
          className="icon-btn"
          title="导入"
          size="small"
          type="text"
          icon={<CloudDownloadOutlined />}
        />
      </Upload>
    </Space>
  )

  return (
    <div className="ant-page-header page-header flow-step-page">
      <div className="ant-page-header-content">
        <div className="layout-left top-bottom-layout">
          <div className='flex-row'>
            <CommonTitle>测试用例分类</CommonTitle>
            <div className='flex-row flex-1 flex-end center'>
              {extra}
            </div>
          </div>
          <ContainerLayout className="flex-1">
            <TypeTree ref={typeTreeRef} typeCode="1" onSelect={onSelect} />
          </ContainerLayout>
        </div>
        <div className="layout-right top-bottom-layout">
          <div className='flex-row'>
            <CommonTitle type="large">
              {currentType && currentType.id
                ? `【${currentType.name || ''}】测试用例配置`
                : '测试用例配置'}
            </CommonTitle>
            <div className='flex-row flex-1 flex-end center'>
              {stepExtra}
            </div>
          </div>
          <ContainerLayout className="flex-1">
            <TestCaseList ref={listRef} type={currentType} typeCode="1" />
          </ContainerLayout>
        </div>
      </div>
    </div>
  )
}

export default TestCase
